<template>
  <div class="Search">
    <van-search
      v-model="keywords"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div class="title">热门搜索</div>
    <div class="hotSearch">
      <div class="items" v-for="item in hotkws" :key="item.id">
        {{ item.title }}
      </div>
    </div>
    <div class="hot_title">
      <span class="line"></span>
      <span>热门推荐</span>
      <span class="line_after"></span>
    </div>
    <div class="hot">
    </div>
  </div>
</template>

<script>
export default {
  name: "FxhDemoSearch",

  data() {
    return {
      keywords: "",
      hotkws: [],
      results: null,
    };
  },

  async created() {
    const {
      data: { data: hotkws },
    } = await this.$request("get", "/fxh/search/keyword");
    console.log(hotkws);
    this.hotkws = hotkws;
  },

  methods: {
    onSearch() {
      console.log("搜索", this.keywords);
    },
  },
};
</script>

<style lang="scss" scoped>
.Search {
  width: 375px;
  height: 100vh;
  background: white;
  .title {
    font-size: 14px;
    color: #999;
    margin: 25px 15px 12px 15px;
  }
  .hotSearch {
    @include around;
    align-items: center;
    .items {
      height: 30px;
      font-size: 13px;
      color: #454545;
      padding: 0 10px;
      border-radius: 15px;
      line-height: 30px;
      border: 0.5px solid #aaa;
      margin: 0 0 10px 10px;
    }
  }
  .hot_title {
    line-height: 67px;
    font-size: 14px;
    color: #282828;
    text-align: center;
    .line {
      position: relative;
      &::before {
        position: absolute;
        content: "";
        width: 85px;
        background: #282828;
        height: 1px;
        left: -116px;
        top: 5px;
      }
    }
    .line_after{
      position: relative;
       &::after {
        position: absolute;
        content: "";
        width: 85px;
        background: #282828;
        height: 1px;
        left: 25px;
        top: 10px;
      }
    }
  }
  .hot{
    width: 375px;
  }
}
</style>
